<template>
    <div class="wrap">
       <div v-if="!doneDataListShow">
            <section class="year" @touchmove.stop>
                <ul>
                    <li v-for='(k,i) in years' @click.stop='yearIndex=i'>
                        <span :class='{selected:i==yearIndex}'>{{k.year}}</span>
                    </li>
                </ul>
            </section>
            <div v-for="(res,index) in resultsList" :key="index">  
                    <section class="all" >
                        <h2 class="all-tltle">
                            <b>{{res.name}}</b>
                        </h2>
                        <div class="all-content">
                            <p><span></span><span>{{res.value[0].payroll_type}}</span><span v-if="res.value.length > 1">{{res.value[1].payroll_type}}</span></p>
                            <p><span>当期收入</span><span>{{res.value[0].currentrevenue}}</span><span v-if="res.value.length > 1">{{res.value[1].currentrevenue}}</span></p>
                            <p><span>权责合计</span><span>{{res.value[0].accrualtotal}}</span><span v-if="res.value.length > 1">{{res.value[1].accrualtotal}}</span></p>
                        </div>
                    </section>
                    <section class="detail">
                        <ul>
                            <li ><span>岗位系数</span><span>{{res.value[0].job_coefficient}}</span><span v-if="res.value.length > 1">{{res.value[1].job_coefficient}}</span></li>
                            <li ><span>在岗天数</span><span>{{res.value[0].ondays}}</span><span v-if="res.value.length > 1">{{res.value[1].ondays}}</span></li>
                            <li ><span>岗位工资/月</span><span>{{res.value[0].monthlypostsalary}}</span><span v-if="res.value.length > 1">{{res.value[1].monthlypostsalary}}</span></li>
                            <li ><span>辅助工资</span><span>{{res.value[0].supplementarysalary}}</span><span v-if="res.value.length > 1">{{res.value[1].supplementarysalary}}</span></li>
                            <li ><span>调节工资</span><span>{{res.value[0].annualpostsalary}}</span><span v-if="res.value.length > 1">{{res.value[1].annualpostsalary}}</span></li>
                            <li ><span>年度工资</span><span>{{res.value[0].adjustbonus}}</span><span v-if="res.value.length > 1">{{res.value[1].adjustbonus}}</span></li>
                            <li ><span>递延奖金</span><span>{{res.value[0].deferredbonus}}</span><span v-if="res.value.length > 1">{{res.value[1].deferredbonus}}</span></li>
                            <li ><span>货币单位</span><span>{{res.value[0].monetaryunit}}</span><span v-if="res.value.length > 1">{{res.value[1].monetaryunit}}</span></li>
                        </ul>
                    </section>
            </div>
       </div>

        <div v-if = 'doneDataListShow'>
            <div class="null-container" >

            </div> 
            <p class="nodate">暂无数据</p>      
        </div> 
    </div>
</template>

<script>
    export default {
        components:{
        },
        data() {
            return {
                yearIndex: 0,
                url: "http://10.5.0.137:8080/salary/queryExSalary",
                years:[],
                resultsList:null,
                doneDataListShow:false,
            }
        },
        mounted(){

            var emplId= localStorage.getItem('leader_em');
            let params = {
                // emplId:window.location.search.split('=')[1]
                emplId:emplId
            };

            this.Axios.Post(this.URL.queryExSalaryWEB.url,params)
                .then((res)=>{
                    this.years = res.data.datas.years;
                    var results = res.data.datas.exSalarys || [{}];
                    if (results && results.length == 0) {
                        this.doneDataListShow = true;
                        return;
                    }
                    var obj = {};
                    for (var i=0,len=results.length;i<len;i++) {
                        if (obj.hasOwnProperty(results[i].executive_class)){
                            obj[results[i].executive_class].push(results[i]);
                        } else {
                            obj[results[i].executive_class] = [results[i]];  
                        }
                    }
                    var arr =[];
             
                    for (var j in obj) {
                        arr.push({
                            name : j,
                            value : obj[j]
                        })
                    }
                    this.resultsList = arr;
                    
                })

        }
    }
</script>

<style scoped lang='less'>
.year ul::-webkit-scrollbar{
    display: none;
}
.wrap {
   

    .year {
        background: #fff;
        ul {
            display: flex;
            padding: 15/50rem;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            span {
                font-size: 14/50rem;
                display: inline-block;
                padding: 0 10rem/50;
            }

            span.selected {
                font-size: 16/50rem;
                font-weight: 700;
                display: inline-block;
                padding: 0 10rem/50;
                color:#26a2ff;
            }
        }


    }

    .all {
        margin-top: 20rem/50;
        padding: 10rem/50;
        padding-bottom: 10rem/50;
        padding-top: 0;

        .all-tltle {
            padding-left: 35/50rem;
            margin:20rem/50 0;

            b {
                position: relative;
                font-size: 16rem/50;
                font-weight: 600;
                color:#333;
            }
            b::before {
                content:'';
                width: 10/50rem;
                height: 10/50rem;
                background-color: #26a2ff;
                border-radius: 50%;
                position: absolute;
                left: -20rem/50;
                top:50%;
                margin-top: -7/50rem;
            }
        }

        .all-content {
            border:1/50rem solid #26a2ff;
            border-radius: 0.1rem;
            p {
                padding: 10rem/50 20rem/50;
                background-color: #fff;
                color:#26a2ff;
                font-size: 16/50rem;
                display: flex;
                justify-content: space-between;
                span {
                    flex:1;
                    text-align:center;
                }

                span:nth-of-type(2) {
                    flex:1;
                    text-align:center;
                }
            }
            p:first-of-type {
                background-color: #26a2ff;
                color:#fff;
                font-size: 14/50rem;
                span {
                    padding-left: 5/50rem;
                }
            }
             p:nth-of-type(2) {
                padding-top: 30rem/75;
            }

             p:last-of-type {
                padding-bottom: 30rem/75;
                border-bottom-right-radius:0.1rem;
                border-bottom-left-radius:0.1rem;
            }

        }


    }

    .detail {
        background-color: #fff;
        padding: 0.3rem 0.2rem;
        li {
            display: flex;
            justify-content: space-between;
            color:#666666;
            padding: 8/50rem 0;
            font-size: 15/50rem;
            height:0.7rem;
            line-height:0.7rem;
            display: flex;
            padding: 0 0.4rem;
            // span:nth-of-type(2) {
            //      margin-left: 35/50rem;

            // }
            span{
                text-align:center;
                flex:1;
                
            }
            // span:last-of-type {
            //     margin-left: 120/50rem;
            // }
        }
       
    }
    .nodate{
      text-align:center;
      font-size:0.32rem;
    }
    .null-container{
        height: 5.2rem;
        background:url(/static/imgs/nodata.png) no-repeat center;
    }

}
</style>